<template>
	<view class="coustomDetail">
		<nav-bars bgColor="transparent" fontColor="#fff" :title="navBarTitle"></nav-bars>
		<view class="topImg"></view>
		<view class="content">
			<view class="infoBox">
				<image :src="customeInfo.external_data.avatar" mode=""></image>
				<view class="name">
					{{customeInfo.follow_data.remark}}
					<view class="wxName">微信昵称：{{customeInfo.name}}</view>
				</view>
			</view>
			<view class="tagsBox" v-if="customeInfo.follow_data.tags.length">
				<text v-for="(item,index) in customeInfo.follow_data.tags" :key="index">{{item.tag_name}}</text>
			</view>
			<view class="coustomInfo">
				<view class="item" v-if="customeInfo.follow_data.remark_corp_name">
					<view class="title">企业</view>
					<view>{{customeInfo.follow_data.remark_corp_name}}</view>
				</view>
				<view class="item" v-if="customeInfo.follow_data.remark_mobiles.length" :class="{'noPadding':customeInfo.follow_data.remark_mobiles.length}">
					<view class="title">电话</view>
					<view class="mobile">
						<view class="phoneNum" :class="{'noBorder':index==customeInfo.follow_data.remark_mobiles.length-1}" v-for="(item,index) in customeInfo.follow_data.remark_mobiles" :key="index">{{item}}</view>
					</view>
				</view>
				<view class="item" v-else>
					<view class="title">电话</view>
					<view>{{customeInfo.customer_mobile}}</view>
				</view>
				<view class="item clearBorder">
					<view class="title">描述</view>
					<view class="sign omit-2" style="line-height: 42rpx;">{{customeInfo.follow_data.description}}</view>
				</view>
			</view>
			<!-- <view class="coustomInfo">
				<view class="item clearBorder">
					<view class="title">实名</view>
					<view class="realName">**李<text>已实名</text></view>
				</view>
			</view> -->
			<view class="coustomInfo">
				<view class="item">
					<view class="title">添加时间</view>
					<view>{{customeInfo.follow_data.createtime}}</view>
				</view>
				<view class="item">
					<view class="title">来源</view>
					<view>{{customeInfo.follow_data.add_way}}</view>
				</view>
				<view class="item clearBorder">
					<view class="title">添加人</view>
					<view class="sign omit-1" style="line-height: 42rpx;">{{customeInfo.staff_nickname?customeInfo.staff_nickname:''}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_client from '@/service/client.js'
	export default{
		data(){
			return{
				navBarTitle:'客户详情',
				qy_user_id:'',
				customer_user_id:'',
				customeInfo:{}
			}
		},
		onLoad(options) {
			this.qy_user_id = options.staffUserId;
			this.customer_user_id = options.customUserId
			this.getCustomerDetail()
		},
		methods:{
			// 获取客户详情
			getCustomerDetail(){
				let params = {
					qy_user_id:this.qy_user_id,
					customer_user_id:this.customer_user_id
				}
				service_client.getCustomerDetail(params).then(res=>{
					console.log(res,'客户详情')
					if(res.code==1){
						this.customeInfo = res.data?res.data:{}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.coustomDetail{
		position: relative;
		.topImg{
			width: 100%;
			height: 568rpx;
			background: url(https://manager.ryz1620.com/static/adminShop/selectStore/bg.png) no-repeat;
			background-size: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.content{
			position: relative;
			// top: 194rpx;
			// left: 0;
			z-index: 10;
			padding: 30rpx;
			.infoBox{
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					flex-shrink: 0;
					border-radius: 50%;
					margin-right: 23rpx;
				}
				.name{
					font: bold 36rpx/54rpx PingFang SC;
					color: #fff;
					.wxName{
						font: 500 24rpx/54rpx PingFang SC;
					}
				}
			}
			.tagsBox{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 36rpx;
				text{
					padding: 12rpx 24rpx;
					border-radius: 23rpx;
					background-color: rgba(255,255,255,0.15);
					font:500 22rpx/22rpx PingFang SC;
					color: #fff;
					margin: 0 20rpx 16rpx 0;
				}
			}
			.coustomInfo{
				width: 702rpx;
				padding: 23rpx 30rpx 12rpx 33rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 17rpx;
				.item{
					padding: 40rpx 0;
					border-bottom: 2rpx solid #F1F1F1;
					background-color: #fff;
					display: flex;
					align-items: center;
					font: 500 30rpx/42rpx PingFang SC;
					color: #666666;
					.title{
						width: 148rpx;
						flex-shrink: 0;
						font: bold 30rpx/42rpx PingFang SC;
						color: #3E3E3E;
					}
					.mobile{
						width: 100%;
						.phoneNum{
							padding: 40rpx 0;
							border-bottom: 2rpx solid #F1F1F1;
						}
						.noBorder{
							border: 0;
						}
					}
					.sign{
						width: 453rpx;
					}
					.realName{
						display: flex;
						align-items: center;
						text{
							padding: 4rpx 12rpx;
							border-radius: 2rpx;
							background-color: #F4EBDC;
							color: #AE8C6C;
							font: 500 22rpx/22rpx PingFang SC;
							margin-left: 10rpx;
						}
					}
				}
				.noPadding{
					padding: 0;
				}
				.clearBorder{
					border: 0;
				}
			}
		}
	}
</style>
